<template>
    <div>
        <van-nav-bar
                title="我的收藏"
                left-text="返回"
                :right-text=this.collectName
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
        />
        <div>
            <el-table
                    ref="multipleTable"
                    :data="booklist"
                    border
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                >
                <el-table-column
                        v-if=current
                        type="selection"
                        width="40">
                </el-table-column>
                <el-table-column  label="我收藏的宝贝">
                    <template slot-scope="scope">
                        <div style="display: flex;width: 75%">
                   <span style="flex: 1">
                        <img :src="scope.row.bookimg" style="height: 80px;width: 80px"/>
                   </span>
                            <span style="margin-left: 0px;margin-top: -5%">
                    <h3 >{{scope.row.bookname}}</h3>
                       <h3 style="color: red">￥{{scope.row.bookprice}}</h3>
                </span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
        </van-list>

        <!--      用来展示没有更多-->
        <div style="height: 50px"></div>
        <van-goods-action v-if=current>

            <van-goods-action-button
                    type="danger"
                    text="取消收藏"
                    @click="onClickButton"
            />
        </van-goods-action>
    </div>
</template>

<script>
    import Toast from "vant/lib/toast";

    export default {
        name: "CollectList",
        data(){
            return{
                //收藏商品
                booklist:[],
                bookName:"",
                //控制是否显示取消收藏和复选框
                current:false,
                //管理或完成
                collectName:"管理",
                i:1,
                //选中的商品id
                delIds:[],
                pidsDtr:"",
                pids:[],
            }
        },
        methods:{
            onClickIcon() {
                Toast('点击图标');
            },
            handleSelectionChange(val) {
                this.delIds = val;
            },
            //把值pid连成字符串
            pidsM(){
                for(var i=0;i<this.delIds.length;i++){
                    this.pids[i]=this.delIds[i].id;
                }
                this.pidsDtr=this.$store.state.userinfo.user.user.id+","+this.pids.join("-");
            },
            //取消选择
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            //取消收藏
            onClickButton() {

                this.$confirm('确定要取消这些收藏吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    customClass: 'winClass',//弹窗样式
                }).then(() => {
                    this.pidsM();
                    this.axios({
                        method:'get',
                        url:"/collect/DeleteManeyCol/"+this.pidsDtr+"",
                    }).then(resp=>{
                        if(resp.data.code==0){
                            this.booklist=resp.data.data.books;
                        }
                    });
                    this.$message({
                        type: 'success',
                        message: '取消成功!'
                    });

                }).catch(() => {
                    this.toggleSelection()
                    this.$message({
                        type: 'info',
                        message: '已取消去除收藏',
                    });
                });
            },

            /////////////////
            onClickLeft() {
                this.$router.push({name:'person'})
            },
            onClickRight() {

                if(this.i==1){
                    this.current=true;
                    this.collectName="完成";
                    this.i=0;
                }else {
                    this.current=false;
                    this.collectName="管理";
                    this.i=1;
                }
            },
            //查询用户所有收藏信息
            SelectCollect(){
                var uId= this.$store.state.userinfo.user.user.id;
                this.axios({
                    method:"get",
                    url:"/collect/selectCollect/"+uId
                }).then(resp =>{
                    this.booklist=resp.data.data.books;
                    console.log(this.booklist)
                })
            },
        },
        mounted() {
            var _this=this;
            _this.SelectCollect();
        }
    }
</script>

<style >
    .winClass{
        width: 300px;
    }
</style>